<template>
    <div>
        <el-button type="primary" @click="dialogVisible = true">创建</el-button>
        <el-dialog
            title="创建账号"
            :visible.sync="dialogVisible"
            separator="<"
            width="30%"
            :before-close="handleClose">
            <div class="row">
                <div class="label">所属集团：<i style="color: red">*</i></div>
                <el-select v-model="value1" placeholder="请选择" style="width: 300px">
                    <el-option
                        v-for="item in dailivalue"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="row"><div class="label">姓名：<i style="color: red">*</i></div><el-input v-model="input" placeholder="请输入姓名" style="width: 300px"></el-input></div>
            <div class="row">
                <div class="label">账号角色：</div>
                <el-select v-model="value" placeholder="请选择" style="width: 300px">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="row"><div class="label">登录账号：<i style="color: red">*</i></div><el-input v-model="input" placeholder="请输入账号" style="width: 300px"></el-input></div>
            <div class="row"><div class="label">登录密码：<i style="color: red">*</i></div><el-input v-model="input" placeholder="请输入密码" style="width: 300px"></el-input></div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisible: false,
                input:'',
                selectedOptions: [],
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                dailivalue: [{
                        value: '选项6',
                        label: '代理商一'
                    },
                    {
                        value: '选项7',
                        label: '代理商二'
                    },
                    {
                        value: '选项8',
                        label: '代理商三'
                    }],
                value1: '',
                value: ''
            };
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            }
        }
    }
</script>

<style lang="less" scoped>
    .row{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin: 10px auto;
        .label{
            width: 120px;
            line-height: 32px;

            text-align: right;

        }
    }
</style>
